<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouse</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html {
        cursor: none;
    }

    .air {
        position: absolute;
        width: 32px;
        height: 32px;
        margin-left: -16px;
    }
</style>

<body>
    <div class="air">
        <?xml version="1.0" standalone="no"?>
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
            t="1690035615249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6876" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path
                d="M426.752 344.149333v554.666667c0 23.68 19.285333 42.666667 43.093333 42.666667h84.48a42.666667 42.666667 0 0 0 43.093334-42.666667v-554.666667h84.949333c47.232 0 62.805333-30.549333 34.56-68.266666l-153.642667-204.8c-28.501333-37.973333-74.112-37.717333-102.4 0l-153.6 204.8c-28.501333 37.973333-12.8 68.266667 34.517334 68.266666h84.949333z"
                fill="#d81e06" p-id="6877"></path>
        </svg>
    </div>
</body>
<script>
    const air = document.querySelector(".air")
    let rad = 0
    window.onmousemove = (e) => {
        if (Math.abs(e.movementX) + Math.abs(e.movementY) > 10) {
            rad = Math.atan2(e.movementX, -e.movementY)
        }
        air.style.transform = `translate(${e.clientX}px,${e.clientY}px) rotate(${rad}rad)`
    }
</script>

</html>